import React, { Component } from 'react'
import { Table, Card, Pagination, Row, Col, Form, Select, Switch, Space } from 'antd'
// import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { getshoplist, getshopname, searchshop, putmiaosha } from "./serve"
class ShopCmt extends Component {
    state = {
        dataSource: [],
        page: 1,
        pageSize: 5,
        count: 1,
        nameSource: []
    }
    columns = [
        {
            title: "商品图片",
            render: (row) => {
                return <img src={row.img1} width="100px" height="60px" alt="" />;
            }
        },
        {
            title: "商品id",
            dataIndex: "proid",
        },
        {
            title: "分类",
            dataIndex: "category",
        },
        {
            title: "商品名",
            dataIndex: "proname",
        },
        {
            title: "秒杀",
            render: (row) => {
                const onChange = async (checked) => {
                    console.log(`${checked}`);
                    // console.log(row.isseckill);
                    // console.log(row.proid);
                    await putmiaosha(row.proid, "isseckill", checked)
                };
                return <>
                    <Space direction="vertical">
                        {row.isseckill ? <Switch
                            checkedChildren="是"
                            unCheckedChildren="否"
                            onChange={onChange}
                            defaultChecked
                        /> : <Switch
                            checkedChildren="是"
                            unCheckedChildren="否"
                            onChange={onChange}
                        />
                        }
                    </Space>
                </>
            }
        },
        {
            title: "特惠",
            render: (row) => {
                const onChange = async (checked) => {
                    console.log(`${checked}`);
                    await putmiaosha(row.proid, "isrecommend", checked)
                };
                return <>
                    <Space direction="vertical">
                        {row.isrecommend ? <Switch
                            checkedChildren="是"
                            unCheckedChildren="否"
                            onChange={onChange}
                            defaultChecked
                        /> : <Switch
                            checkedChildren="是"
                            unCheckedChildren="否"
                            onChange={onChange}
                        />
                        }
                    </Space>
                </>
            }
        }
        // {
        //     title: "tupian",
        //     dataIndex: "banners",
        //   },
    ]
    // timer
    render() {
        let { dataSource, count, nameSource } = this.state
        const onChange = async (value) => {
            console.log(`selected ${value}`);
            let res = await searchshop(value)
            this.setState({ dataSource: res.data, count: res.data.length })
        };

        // const onSearch = (value) => {
        //     if (this.timer) {
        //         clearTimeout(this.timer)
        //     }
        //     this.timer = setTimeout(() => {
        //         console.log('search:', value);
        //     }, 1000)
        // };
        return (<div>
            <Card>
                <Form
                    wrapperCol={{
                        span: 24,
                    }}
                >
                    <Row>
                        <Col span={8}>
                            <Form.Item name="kw" label="分类">
                                <Select
                                    showSearch
                                    optionFilterProp="children"
                                    onChange={onChange}
                                    // onSearch={onSearch}
                                    filterOption={(input, option) =>
                                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                                    }
                                    placeholder="请选择分类"
                                    options={nameSource}
                                >
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <Table
                    pagination={false}
                    rowKey="proid"
                    dataSource={dataSource}
                    columns={this.columns}
                >
                </Table>
                <Pagination
                    simple
                    defaultCurrent={1}
                    pageSize={5}
                    total={count}
                    onChange={(page) => {
                        console.log("页码改变", page);
                        this.getlist(page, 5);
                    }}
                />
            </Card>
        </div>);
    }
    getlist = async (page, pageSize) => {
        let res = await getshoplist(page, pageSize)
        this.setState({ dataSource: res.data, count: res.total })
        console.log(res.data);
    }
    getname = async () => {
        let arr = []
        let res = await getshopname()
        console.log(res.data);
        res.data.forEach(item => {
            arr.push({ value: item, label: item, })
        });

        this.setState({ nameSource: arr })
        console.log(arr);
    }
    componentDidMount() {
        // let token =localStorage.getItem("token")
        this.getlist(1, this.state.pageSize)
        this.getname()
    }
}

export default ShopCmt;